import React from 'react'
import { ListView } from 'antd-mobile';
import ReactDOM from 'react-dom'
import Shop from '../../components/Shop.jsx'
import Tit from '../../components/Tit.jsx'
import { withRouter } from 'react-router-dom'
import './SearchData.less'
import '../Index/index.less'
class SearchData extends React.Component {
    constructor(props) {
        super(props)
        const dataSource = new ListView.DataSource({
            rowHasChanged: (row1, row2) => {
                return row1 !== row2
            },
        });
        this.state = {
            dataSource,
            isLoading: true,
            height: document.documentElement.clientHeight,
            useBodyScroll: true,
            pageIndex: 1,
            tuijian: { title: '只能已发送', money: '111' },
            SearchData: null,
        }
    }
    componentDidUpdate() {
        document.body.style.overflow = 'auto';
    }
    componentDidMount() {
        const hei = this.state.height - ReactDOM.findDOMNode(this.lv).offsetTop;
        this.$postData('/api/goods/searchGood', { pageNum: this.state.pageIndex, pageSize: 20, goodName: this.props.match.params.search }, params => {
            console.log(params)
            switch (params.code) {
                case 100:
                    if (params.data.list.length === 0) {
                        this.Toast.info('暂无结果');
                        console.log(this.props.history)
                        this.props.history.goBack()
                    }
                    this.setState({
                        height: hei,
                        isLoading: false,
                        dataSource: this.state.dataSource.cloneWithRows(params.data.list),
                    })
                    this.rData = params.data.list
                    break;
                default:
                    this.Toast.info(params.msg);
                    break;
            }
        })
    }

    onEndReached = (event) => {
        if (this.state.isLoading && !this.state.hasMore) {
            return;
        }
        this.setState({ isLoading: true });
        const dataArr = [];
        this.$postData('/api/goods/searchGood', { pageNum: this.state.pageIndex + 1, pageSize: 20, goodName: this.props.match.params.search }, params => {
            console.log(params)
            this.rData = [...this.rData, ...params.data.list];
            //  console.log(this.rData)
            this.setState({
                isLoading: false,
                dataSource: this.state.dataSource.cloneWithRows(this.rData),
                pageIndex: this.state.pageIndex + 1
            })
        })
        return;
    }
    render() {
        const separator = (sectionID, rowID) => (
            <div
                key={`${sectionID}-${rowID}`}
                style={{
                    height: 8,
                    // backgroundColor: '#F5F5F9',
                    // borderTop: '1px solid #ECECED',
                    // borderBottom: '1px solid #ECECED',
                }}
            />
        );
        const row = (rowData, sectionID, rowID) => {
            //  console.log(rowData)
            //  console.log(sectionID)
            //  console.log(rowID)
            // if (index < 0) {
            //     index = this.state.dataSource.length - 1;
            // }
            // console.log(this.state.dataSource)
            // const obj = this.state.dataSource[index--];
            // console.log(obj)
            return (
                <div key={rowID}
                    className='Link'>
                    <Shop data={rowData}></Shop>
                </div>
            );
        };
        return (<div className='Sjhl'>
            <Tit zz={true} tit={'护发'}></Tit>
            <div className='Shop-d1'>
                <ListView
                    key='0'
                    ref={el => this.lv = el}
                    dataSource={this.state.dataSource}
                    // renderHeader={() => <span>Pull to refresh</span>}
                    renderFooter={() => (<div style={{ padding: 30, textAlign: 'center' }}>
                        {this.state.isLoading ? 'Loading...' : 'Loaded'}
                    </div>)}
                    renderRow={row}
                    renderSeparator={separator}
                    useBodyScroll={this.state.useBodyScroll}
                    onEndReached={this.onEndReached}
                    pageSize={5}
                />
            </div>
        </div>);
    }
}

export default withRouter(SearchData)